<template>
	<div class="serversConfig">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'><i class="icon iconfont">&#xe7d8;</i>
				当前位置/系统配置/
				<span>渠服管理</span>
			</div>
		</div>
		<div class="right_content">
			<div class="form">
				<div class="divider2"></div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline" :inline="true">
					<div class="import">
						<el-form-item label="游戏名称：" :label-width="formLabelWidth">
							<el-select
							  v-model="region" @change='projectsChange'
							  placeholder="请选择游戏" type="success">
								<el-option
							    v-for="item in projects"
						        :label="item.label"
						        :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<!-- <el-form-item label="区服ID：" prop="id":label-width="formLabelWidth">
							<el-input v-model.number="ruleForm.id"></el-input>
						</el-form-item>
						<el-form-item label="区服名称：" prop="name" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.name"></el-input>
						</el-form-item>
						<el-form-item label="区服渠道：" prop="channelIds" :label-width="formLabelWidth">
							<el-dropdown 
							:hide-on-click="false"
							trigger="click"
							>
								<el-button>
									请选择<i class="el-icon-caret-bottom el-icon--right"></i>
								</el-button>
								<el-dropdown-menu
									slot="dropdown">
									<div class="inputSBox">
										<el-checkbox  v-model="checkAllChIds1" @change="handleCheckAllChangeChIds1">全选</el-checkbox>
										<el-input v-model="chIds1" @change="chIdsVa1" icon="search"></el-input>
									</div>
									<el-checkbox-group v-model="checkedChIds1" @change="handleCheckedChangeChIds1">
										<el-dropdown-item 
											v-for="item in channelNameList1"
											:key="item.value"
											:command="item.value"
											class="chIds"
										>
											<el-checkbox :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
										</el-dropdown-item>
									</el-checkbox-group>	
								</el-dropdown-menu>
							</el-dropdown>
						</el-form-item>
						<el-form-item label="区服分组：" :label-width="formLabelWidth">
							<el-select
							  v-model="ruleForm.serverType"
							  placeholder="请选择分组" type="success" @change="seFn">
								<el-option
							    v-for="item in serverTypeList"
							    :key="item.value"
							    :label="item.label"
							    :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="区服容量上限" prop="capacity" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.capacity"></el-input>
						</el-form-item>
						<el-form-item label="渠道描述：" prop="description" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.description"></el-input>
						</el-form-item>
						<el-form-item label="渠道描述：" :label-width="formLabelWidth" style="margin-right: 137px;">
							<el-checkbox v-model="ruleForm.used">是否可用</el-checkbox>
						</el-form-item> -->
					</div>
					<el-form-item class="conmit">
						<!-- <el-button type="primary" @click="submitForm('ruleForm')" icon="plus">立即添加</el-button> -->
						<el-button type="primary" @click="searchForm()" icon="search">立即搜索</el-button>
						<br>
						<!-- <span class="warning">（输入搜索条件，留空搜索全部！）</span> -->
					</el-form-item>
				</el-form>
				<div class="divider2"></div>
			</div>
			<div class="table">
				<el-table
			:data="tableData"
			border 
			style="width: 100%"  >
					<el-table-column align="center"
					  label="游戏名称">
						<template scope="scope">
							<div slot="reference" class="name-wrapper">
								<el-tag>{{ scope.row.gameName }}</el-tag>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center"
					  label="区服ID"   prop="id"
					  width="100">
						<template scope="scope">
							<span>{{ scope.row.id }}</span>
						</template>							
						</el-table-column>
					<el-table-column align="center"
					  label="区服名称" prop="name">
						<template scope="scope">
								<el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
						</template>							
						</el-table-column>
					<!-- <el-table-column align="center"
					  label="区服渠道 " prop="" width="200">
							 <template scope="scope">
								 <el-dropdown 
									:hide-on-click="false"
									trigger="click"
									>
										<el-button>
											请选择<i class="el-icon-caret-bottom el-icon--right"></i>
										</el-button>
										<el-dropdown-menu
											slot="dropdown">
											<div class="inputSBox">
												<el-checkbox  v-model="checkAllChIds2"  @change="handleCheckAllChangeChIds2($event,scope)">全选</el-checkbox>
												<el-input v-model="chIds2" @change="chIdsVa2" icon="search"></el-input>
											</div>
											<el-checkbox-group v-model="scope.row.channelIds" @change="handleCheckedChangeChIds2">
												<el-dropdown-item 
													v-for="item in channelNameList2"
													:key="item.value"
													:command="item.value"
													class="chIds"
												>
													<el-checkbox :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
												</el-dropdown-item>
											</el-checkbox-group>	
										</el-dropdown-menu>
									</el-dropdown>
							</template>						 
						</el-table-column> -->
					<el-table-column align="center" prop="serverType"
					  label="区服分组">
						
							<template scope="scope">
								<el-select  v-model="scope.row.serverType" placeholder="请选择">
								<el-option
									v-for="item in serverTypeList"
									:key="item.value"
									:label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
							</template>							
						
						</el-table-column>
					<el-table-column align="center" prop="capacity"
					  label="区服容量上限">
							<template scope="scope">
								<!-- <el-input v-model="scope.row.capacity" placeholder="请输入内容"></el-input> -->
								<span>{{ scope.row.capacity }}</span>
							</template>						
					</el-table-column>
					<el-table-column align="center" prop="description"
					  label="渠道描述">
							<template scope="scope">
								<el-input v-model="scope.row.description" placeholder="请输入内容"></el-input>
							</template>							
						</el-table-column>
						<el-table-column align="center" prop="used"
					  label="是否可用">
							<template scope="scope">
								<el-checkbox v-model="scope.row.used"></el-checkbox>
							</template>							
						</el-table-column>
					<!-- <el-table-column label="操作" align="center" width="300">
						<template scope="scope">
							<el-button 
					      size="small"
					      @click="edit(scope.$index, scope.row)">修改</el-button>
							<el-button
							type="danger"
					      size="small"
					      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column> -->
				</el-table>
				<div class="block">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="pageSizes"
						:page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="dataTotal">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./serversConfig.styl"></style>
<script src="./serversConfig.js"></script>